<!DOCTYPE html>
<html  >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="teedoc, markdown, jupyter notebook, html, document generation, alternative gitbook, website generation, static website, document writing">
    <meta name="description" content="teedoc, convert markdown or jupyter notbook into html static web pages, introduce the basic use of teedoc">
    <meta name="generator" content="teedoc">
    <meta name="markdown-generator" content="teedoc-plugin-markdown-parser">
        <link rel="stylesheet" href="/static/css/theme_default/prism.min.css" type="text/css"/>
        <link rel="stylesheet" href="/static/css/theme_default/dark.css" type="text/css"/>
        <link rel="stylesheet" href="/static/css/theme_default/light.css" type="text/css"/>
        <link rel="stylesheet" href="/static/css/custom.css" type="text/css"/>
        <script src="/static/js/theme_default/jquery.min.js"></script>
        <script src="/static/js/theme_default/pre_main.js"></script>
        <link rel="stylesheet" href="/static/css/search/style.css" type="text/css"/>
        <script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?91ac08174b63c5c88f71f8a94004a1fe";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
    <title>start writing document - teedoc</title>
</head>
<body>
    
            <div id="navbar">
                <div id="navbar_menu">
                    <a class="site_title" href="/en/"><img class="site_logo" src="/static/image/logo.png" alt="teedoc logo"><h2>teedoc</h2></a>
                    <a id="navbar_menu_btn"></a>
                </div>
                <div id="navbar_items">
                    <div>
                        <ul id="nav_left">
<li class="active"><a  href="/get_started/en/">Install</a></li>
<li class=""><a  href="/develop/en/">Develop</a></li>
</ul>

                    </div>
                    <div>
                        <ul id="nav_right">
<li class=""><a target="_blank" href="https://github.com/neutree/teedoc">github</a></li>
<li class="sub_items "><a  href="">语言: English</a><ul><li class=""><a  href="/get_started/zh/">中文</a></li>
<li class="active"><a  href="/get_started/en/">English</a></li>
</ul></li>
</ul>

                        <ul class="nav_plugins"><li><a id="themes" class="light"></a></li></ul><ul class="nav_plugins"><li><a id="search"><span class="icon"></span><span class="placeholder">Search</span>
                            <div id="search_hints">
                                <span id="search_input_hint">Keywords separated by space</span>
                                <span id="search_loading_hint">Loading, wait please ...</span>
                                <span id="search_download_err_hint">Download error, please check network and refresh again</span>
                                <span id="search_other_docs_result_hint">Result from other docs</span>
                                <span id="search_curr_doc_result_hint">Result from current doc</span>
                            </div></a></li></ul>
                    </div>
                </div>
            </div>
    
        <div id="wrapper">
            
            <div id="sidebar_wrapper">
                <div id="sidebar">
                    <div id="sidebar_title">
                        
                    </div>
                    <ul class="show">
<li class="not_active with_link"><a href="/get_started/en/index.html"><span class="label">Introduction to teedoc</span><span class=""></span></a></li>
<li class="not_active with_link"><a href="/get_started/en/install/index.html"><span class="label">Install teedoc</span><span class=""></span></a></li>
<li class="active with_link"><a href="/get_started/en/usage/start.html"><span class="label">Start writing document</span><span class=""></span></a></li>
<li class="not_active with_link"><a href="/get_started/en/usage/write_attention.html"><span class="label">Pay attention to when writing documents</span><span class=""></span></a></li>
<li class="not_active with_link"><a href="/get_started/en/plugins/index.html"><span class="label">Plugin</span><span class="sub_indicator sub_indicator_collapsed"></span></a><ul class="">
<li class="not_active with_link"><a href="/get_started/en/plugins/themes.html"><span class="label">Theme Plugin</span><span class=""></span></a></li>
<li class="not_active with_link"><a href="/get_started/en/plugins/others.html"><span class="label">Other plugins</span><span class=""></span></a></li>
</ul>
</li>
<li class="not_active with_link"><a href="/get_started/en/syntax/syntax_markdown.html"><span class="label">markdown syntax</span><span class=""></span></a></li>
<li class="not_active with_link"><a href="/get_started/en/usage/deploy.html"><span class="label">Deployment</span><span class="sub_indicator sub_indicator_collapsed"></span></a><ul class="">
<li class="not_active with_link"><a href="/get_started/en/usage/deploy_github_pages.html"><span class="label">Deploy to github</span><span class=""></span></a></li>
<li class="not_active with_link"><a href="/get_started/en/usage/deploy_nginx.html"><span class="label">Use nginx to deploy to the server</span><span class=""></span></a></li>
<li class="not_active with_link"><a href="/get_started/en/usage/deploy_cdn.html"><span class="label">Use CDN to accelerate website</span><span class=""></span></a></li>
</ul>
</li>
<li class="not_active with_link"><a href="/get_started/en/usage/seo.html"><span class="label">SEO (Optimize for Search Engines)</span><span class=""></span></a></li>
<li class="not_active with_link"><a href="/get_started/en/usage/sites.html"><span class="label">Website using teedoc</span><span class=""></span></a></li>
<li class="not_active no_link"><a><span class="label">More samples</span><span class="sub_indicator sub_indicator_collapsed"></span></a><ul class="">
<li class="not_active no_link"><a><span class="label">Second-level subdirectory example</span><span class="sub_indicator sub_indicator_collapsed"></span></a><ul class="">
<li class="not_active no_link"><a><span class="label">Sample three-level sub-directory</span><span class="sub_indicator sub_indicator_collapsed"></span></a><ul class="">
<li class="not_active with_link"><a href="/get_started/en/more/example_docs/doc1.html"><span class="label">Article 1</span><span class=""></span></a></li>
</ul>
</li>
<li class="not_active with_link"><a href="/get_started/en/more/example_docs/doc2.html"><span class="label">Article 2</span><span class=""></span></a></li>
</ul>
</li>
<li class="not_active with_link"><a href="https://github.com/teedoc/teedoc" target="_blank"><span class="label">This is a external link</span><span class=""></span></a></li>
</ul>
</li>
</ul>

                </div>
            </div>
            <div id="menu_wrapper">
                                    <div id="menu">
                                    </div>
                                </div>
            <div id="article">
                <div id="content_wrapper">
                    <div id="content_body">
                        <div id="article_title">
                            <h1>start writing document</h1>
                        </div>
                        <div id="article_tags">
                            <ul></ul>
                        </div>
                        <div id="article_content">
                            <h2 id="build-and-preview">Build and Preview</h2>

<p>Execute in the document directory with <code>site_config.json</code></p>

<pre><code>teedoc serve
</code></pre>

<p>After displaying <code>Starting server at 0.0.0.0:2333 ....</code>, it is fine</p>

<p>Open the browser to visit: <a href="http://127.0.0.1:2333">http://127.0.0.1:2333</a></p>

<p>Modify the file in real time. After saving the file, it will automatically rebuild the file after <code>3</code> seconds by default, and then the browser will automatically refresh</p>

<blockquote>
  <p>The delay time of automatic refresh can be set, you can add the <code>-t</code> parameter, for example, <code>teedoc -t 0 serve</code> is set to a <code>0</code> second delay,<br />
  It can also be set in the document configuration, see the description of the configuration parameter <code>rebuild_changes_delay</code> below</p>
</blockquote>

<p>If you only need to build and generate HTML pages, you only need to execute</p>

<pre><code>teedoc build
</code></pre>

<blockquote class="spoiler">
  <p>Note that if you are finally generating the release version of the document, you must use the <code>build</code> command to generate the website page, the page generated by the <code>serve</code> command can only be used for local preview, there will be redundant preview related code, which is not suitable Used in production deployment</p>
</blockquote>

<p>In addition, you can also specify the parameter <code>-d</code> or <code>--dir</code> to specify the document directory, so that you do not need to execute commands under the document directory, such as</p>

<pre><code>teedoc -d /home/teedoc/my_doc build
</code></pre>

<h2 id="build-document-delete">Build document delete</h2>

<p>The built document will be placed in the <code>out</code> directory, the program will not actively delete it, if you need to clear it, please delete it manually</p>

<h2 id="document-directory-structure">Document directory structure</h2>

<pre><code>├─.github
├─docs
│ ├─develop
│ │ ├─en
│ │ └─zh
│ └─get_started
│ ├─assets
│ ├─en
│ └─zh
├─pages
│ └─index
│ ├─en
│ └─zh
├─static
│
└─site_config.json
</code></pre>

<ul>
<li><code>.github</code>: automatic build script, how to use it in later chapters</li>
<li><code>docs</code>: document, contains multiple documents, each document is a separate folder</li>
<li><code>pages</code>: pages, including homepages, 404 pages, etc.</li>
<li><code>static</code>: static file folder, such as storing pictures</li>
<li><code>site_config.json</code>: website configuration file</li>
<li><code>config.json</code>: In addition to <code>site_config.json</code>, each document directory can have <code>config.json</code> to configure document related pages</li>
<li><code>sidebar.json</code>: document directory</li>
</ul>

<h2 id="configuration-file">Configuration file</h2>

<p>The configuration file can be a file in <code>json</code> or <code>yaml</code> format, choose the one you like</p>

<p>If your document directory has a lot of content, it is recommended to use the <code>yaml</code> format, which looks more concise</p>

<p><code>teedoc</code> provides commands for converting between <code>json</code> and <code>yaml</code> formats</p>

<h3 id="from-json-to-yaml">From json to yaml</h3>

<pre><code>teedoc -f ./config.json json2yaml
</code></pre>

<h3 id="from-yaml-to-json">From yaml to json</h3>

<pre><code>teedoc -f ./config.json yaml2json
</code></pre>

<h2 id="site_configjson-site-configuration">site_config.json Site configuration</h2>

<p>Website configuration items, such as website name, page routing, plug-in configuration, etc.</p>

<p>The following sample configuration file looks like there are many configuration items, don’t be scared, in fact it is very simple, the main configuration items, mastered, thinking is easy</p>

<p>The configuration file is in <code>json</code> format, for example:</p>

<pre><code class="json language-json">{
    "site_name": "teedoc",
    "site_slogon": "happy to write",
    "site_root_url": "/",
    "site_domain": "teedoc.github.io",
    "site_protocol": "https",
    "config_template_dir": "./",
    "route": {
        "docs": {
            "/get_started/zh/": "docs/get_started/zh",
            "/get_started/en/": "docs/get_started/en",
            "/develop/zh/": "docs/develop/zh",
            "/develop/en/": "docs/develop/en"
        },
        "pages": {
            "/": "pages/index/zh",
            "/en/": "pages/index/en"
        },
        "assets": {
            "/static/": "static",
            "/get_started/assets/": "docs/get_started/assets"
        },
        "/blog/": "blog"
    },
    "executable": {
        "python": "python3",
        "pip": "pip3"
    },
    "plugins": {
        "teedoc-plugin-markdown-parser":{
            "from": "pypi",
            "config": {
            }
        },
        "teedoc-plugin-theme-default":{
            "from": "pypi",
            "config": {
                "dark": true,
                "env":{
                    "main_color": "#4caf7d"
                },
                "css": "/static/css/custom.css",
                "js": "/static/js/custom.js"
            }
        }
    }
}

</code></pre>

<ul>
<li><code>site_name</code>: site name</li>
<li><code>site_slogon</code>: website slogan</li>
<li><code>site_root_url</code>: website root directory path, use the default value <code>/</code>; if you need to put the generated content in the website folder (not the root directory folder), you can set</li>
<li><code>site_domain</code>: website domain name, currently used place: generate <code>sitemap.xml</code> and <code>robots.txt</code></li>
<li><code>site_protocol</code>: website protocol, <code>http</code> or <code>https</code>, currently used place: generate <code>sitemap.xml</code> and <code>robots.txt</code></li>
<li><code>config_template_dir</code>: <code>config</code> template file, <code>config.json</code> or <code>config.yaml</code> in other document directories can be <code>import</code> the files in it, the default location is the directory where <code>site_config</code> is located</li>
<li><code>route</code>: Web page routing, including routing of documents, pages and resource files, such as routing of documents</li>
</ul>

<pre><code class="json language-json">"docs": {
    "/get_started/zh/": "docs/get_started/zh",
    "/get_started/en/": "docs/get_started/en",
    "/develop/zh/": "docs/develop/zh",
    "/develop/en/": "docs/develop/en"
},
</code></pre>

<p>The <code>key</code> represents the <code>url</code> of the document in the final generated website, and the following value is the corresponding source document path.<br />
For example, the source document <code>docs/get_started/zh/README.md</code> will generate the file <code>out/get_started/zh/index.html</code> after construction. If it is not a <code>md</code> file (ie unsupported file), it will be left intact Copy files automatically, and finally the <code>out</code> directory is the generated website</p>

<p>The same is true for <code>pages</code>, <code>assets</code> will not perform document conversion and directly copy to the corresponding directory</p>

<ul>
<li><code>executable</code>: executable program settings, here you can set the executable program names of <code>python</code> and <code>pip</code>, which will be used when installing the plug-in</li>
<li><code>plugins</code>: Plug-in configuration, mainly composed of name, source, and configuration items.<br />
For the name, you can search for <code>teedoc-plugin</code> in <a href="https://github.com">github</a> to find open source plug-ins. You are also welcome to participate in writing plug-ins (you only need to use the <code>Python</code> syntax);<br />
Fill in the <code>from</code> field with <code>pypi</code>, if the plug-in is downloaded locally, you can also fill in the folder path, or you can fill in the <code>git</code> path directly, such as <code>git+https://github.com/*****/* *****.git</code><br />
The configuration items are determined by the specific plug-in. For example, <code>teedoc-plugin-theme-default</code> has the <code>dark</code> option to choose whether to enable the dark theme</li>
<li><code>rebuild_changes_delay</code>: After detecting file changes, how many seconds to delay automatically regenerating the document, the browser will automatically refresh the page, the default is <code>3</code> seconds, the shortest can be set to <code>0</code> seconds, you can use <code>teedoc -t 3 serve</code> or <code>teedoc --delay serve</code> to override this setting</li>
<li><code>robots</code>: Customize the content of <code>robots.txt</code>, such as <code>"User-agent": "*"</code> means that all clients are allowed to crawl, which will have an impact on <code>SEO</code>. For example, crawling of <code>JPEG</code> pictures is not allowed: <code>"Disallow": "/.jpeg$"</code>, and access to the <code>admin</code> directory: <code>"Disallow": "/admin"</code> is not allowed, specifically and <code>robots.txt</code> Same format requirements</li>
</ul>

<h2 id="configjson-document-configuration">config.json document configuration</h2>

<p>This is the configuration for each document, placed in the root directory of each document, such as <code>docs/get_started/zh/config.json</code>, each document is independent of each other, you can set the same to keep the website navigation bar consistent</p>

<p>Here you can configure the navigation bar of each document and the content of the footer (<code>footer</code>), and you can also set the <code>config</code> item of the plug-in. The current document will override the configuration in <code>site_config.json</code> to achieve different Documents in different languages ​​(internationalization/i18n) or styles, etc.</p>

<p>such as:</p>

<pre><code class="json language-json">{
    "import": "config_zh",
    "id": "teedoc_page",
    "class": "language_zh",
    "navbar": {
        "title": "teedoc",
        "logo": {
            "alt": "teedoc logo",
            "src": "/static/image/logo.png"
        },
        "home_url": "/",
        "items": [
            {
                "url": "/get_started/zh/",
                "label": "Installation and Use",
                "position": "left"
            },
            {
                "url": "/develop/zh/",
                "label": "Development",
                "position": "left"
            },
            {
                "url": "https://github.com/neutree/teedoc",
                "label": "github",
                "target": "_blank",
                "position": "right"
            },
            {
                "label": "Language: ",
                "position": "right",
                "items": [
                    {
                        "url": "/get_started/zh/",
                        "label": "Chinese"
                    },
                    {
                        "url": "/get_started/en/",
                        "label": "English"
                    }
                ]
            }
        ]
    },
    "footer":{
        "top":[
            {
                "label": "Link",
                "items": [
                    {
                        "label": "Use teedoc to build",
                        "url": "https://github.com/neutree/teedoc",
                        "target": "_blank"
                    },
                    {
                        "label": "Copyright © 2021 Neucrack",
                        "url": "https://neucrack.com",
                        "target": "_blank"
                    }
                ]
            },
            {
                "label": "Source",
                "items": [
                    {
                        "label": "github",
                        "url": "https://github.com/neutree/teedoc",
                        "target": "_blank"
                    },
                    {
                        "label": "Source files of this website",
                        "url": "https://github.com/teedoc/teedoc.github.io",
                        "target": "_blank"
                    }
                ]
            }
        ],
        "bottom": [
            {
                "label": "*ICP备********号-1",
                "url": "https://beian.miit.gov.cn",
                "target": "_blank"
            },
            {
                "label": "*Public Network Security No. ************",
                "url": "https://beian.miit.gov.cn/#/Integrated/index",
                "target": "_blank"
            }
        ]
    },
    "plugins": {
        "teedoc-plugin-search":{
            "config": {
                "search_hint": "Search",
                "input_hint": "Enter keywords, separate multiple keywords with spaces",
                "loading_hint": "Loading, please wait...",
                "download_err_hint": "Failed to download the file, please refresh and try again or check the network",
                "other_docs_result_hint": "Results from other documents",
                "curr_doc_result_hint": "Current document search result"
            }
        }
    }
}
</code></pre>

<ul>
<li><code>import</code>: You can import the configuration from the template file, the file name without suffix. For example, <code>site_config</code> set <code>config_template_dir</code> to <code>./</code>, fill in <code>"import": "config_zh"</code> here, it means to import <code>config_zh.json</code> (priority) or <code>config_zh in the same directory as</code>site_config<code>.yaml</code>.<br />
Then you can add the configuration of the current document, overwrite the template file, the same keywords, and modify different content. If it is an array (list), to replace the content of the template file, you need to add <code>id</code> to the array item of the template file. Keyword, then modify, if the <code>id</code> keyword is not specified, it will be appended to the array. For example, the template file <code>config_zh</code>:</li>
</ul>

<pre><code class="json language-json">{
    "navbar": {
        "title": "teedoc",
        "items": [
            {
                "url": "/get_started/zh/",
                "label": "安装使用",
                "position": "left"
            },
            {
                "id": "language",
                "label": "Language: ",
                "position": "right",
                "items": [
                    {
                        "url": "/zh",
                        "label": "中文"
                    },
                    {
                        "url": "/en",
                        "label": "English"
                    }
                ]
            }
        ]
    }
}
</code></pre>

<p>The configuration file of a specific document:</p>

<pre><code class="json language-json">{
    "import": "config_zh",
    "navbar": {
        "title": "teedoc123",
        "items": [
            {
                "id": "language",
                "label": "Language: ",
                "position": "right",
                "items": [
                    {
                        "url": "/get_started/zh",
                        "label": "中文"
                    },
                    {
                        "url": "/get_started/en",
                        "label": "English"
                    }
                ]
            }
        ]
    }
}
</code></pre>

<ul>
<li><code>id</code>: The <code>id</code> of the document. Generally, there is no need to write it. The <code>id</code> will be set to the <code>&lt;html&gt;</code> tags of all pages in the <code>config.json</code> directory. For example, if <code>teedoc_page</code> is set here, all pages in this directory will become <code>&lt;html id="teedoc_page"&gt; ... &lt;/html&gt;</code>. If the <code>markdown</code> file has set <code>id</code>, this value will be overwritten, that is, each page can only have one <code>id</code>.</li>
<li><code>class</code>: The <code>class</code> of the document, generally you don't need to write it. Set the <code>class</code> to the <code>&lt;html&gt;</code> tags of all pages in the <code>config.json</code> directory, and use spaces for multiple <code>class</code> Separate. For example, if <code>language_zh</code> is set here, all pages in this directory will become <code>&lt;html class="language_zh"&gt; ... &lt;/html&gt;</code>. If <code>class</code> is set in the <code>markdown</code> file, it will be appended. For example, if <code>language_zh</code> is set in <code>config.json</code>, and <code>class: zh_readme</code> is set in <code>README.md</code>, the final result is <code>class=" language_zh zh_readme"</code>. This function is convenient to customize the style of each page or the style of different documents.</li>
<li><code>navbar</code>: Navigation bar settings, each document can be individually set up the navigation bar, if you want to keep the entire website unified, you can modify each configuration to be the same. The keyword <code>type</code> is used in the first layer and is used to indicate the category of this label in the navigation bar. The values are:<br />
<ul><br />
<li><code>link</code>: normal link, this option is the default when you don’t write the <code>type</code> keyword</li><br />
<li><code>list</code>: There are sub-items, which will be displayed in the form of a drop-down menu<br /><br />
<img src="../../assets/images/navbar.png" alt="" /></li><br />
<li><code>selection</code>: Single option, such as language selection. When the <code>type</code> keyword is not written and there is the <code>items</code> keyword, this option is the default<br /><br />
<img src="../../assets/images/navbar2.png" alt="" /></li><br />
</ul></li>
<li><code>footer</code>: website footer, divided into upper and lower parts, and multiple columns can be added to the upper part, and each column can have multiple values</li>
<li><code>plugins</code>: Configure the configuration items of the plug-in, if it has been set in the <code>site_config.json</code>, it will be overwritten, that is, the priority of the child <code>config</code> is higher</li>
</ul>

<h2 id="sidebarjson-document-directory-sidebar-settings">sidebar.json Document directory (sidebar) settings</h2>

<p>There is a directory for setting documents, one for each document, independent of each other</p>

<p>The file path uses a relative path, just fill in the file name, <code>README.md</code> will be automatically converted to <code>index.html</code></p>

<p>In addition, you can also directly <code>url</code> without writing the path of <code>file</code>, such as <code>"url": "/get_started/zh"</code>, at the same time you can set <code>"target":"_blank"</code> to open in a new window. Current window open</p>

<p>such as:</p>

<pre><code class="json language-json">{
    "items":[
        {
            "label": "Introduction to teedoc",
            "file": "README.md"
        },
        {
            "label": "Install teedoc",
            "file": "install/README.md"
        },
        {
            "label": "Start writing document",
            "file": "usage/start.md"
        },
        {
            "label": "Plugin",
            "file": "plugins/README.md",
            "items":[
                {
                    "label": "Theme Plugin",
                    "file": "plugins/themes.md"
                },
                {
                    "label": "Other plugins",
                    "file": "plugins/others.md"
                }
            ]
        },
        {
            "label": "markdown syntax",
            "file": "syntax/syntax_markdown.md"
        },
        {
            "label": "Website using teedoc",
            "file": "usage/sites.md"
        },
        {
            "label": "More samples",
            "items":[
                {
                    "label": "Second-level subdirectory example",
                    "items":[
                        {
                            "label": "Sample three-level sub-directory",
                            "items":[
                                {
                                    "label": "Article 1",
                                    "file": "more/example_docs/doc1.md"
                                }
                            ]
                        },
                        {
                            "label": "Article 2",
                            "file": "more/example_docs/doc2.md"
                        }
                    ]
                },
                {
                    "label": "This is a link",
                    "url": "https://github.com/teedoc/teedoc",
                    "target": "_blank"
                }
            ]
        }
    ]
}
</code></pre>

<h2 id="markdown-documentation">Markdown documentation</h2>

<p>You need to confirm in <code>site_config.json</code> that there is a <code>markdown</code> parsing plugin enabled, such as <code>teedoc-plugin-markdown-parser</code>.</p>

<p>Create a folder or file in the directory corresponding to <code>config.json</code>, such as <code>get_started/README.md</code> (<code>README.md</code> will eventually generate <code>index.html</code>), and then write the content:</p>

<h3 id="markdown-header">Markdown header</h3>

<p>Add a header</p>

<pre><code class="markdown language-markdown">---
title: teedoc
keywords: teedoc, markdown, jupyter notebook, html, document generation, alternative gitbook, website generation, static website
desc: teedoc, convert markdown or jupyter notbook into html static webpage
id: zh_readme
class: zh_readme
---
</code></pre>

<p>Use these keys to set article information:</p>

<ul>
<li><code>title</code>: the title of the article</li>
<li><code>keywords</code>: Keywords, multiple keywords are separated by English commas <code>,</code>, will be added to the header of <code>html</code>, which is convenient for search engines to crawl</li>
<li><code>desc</code>: page description, which will be added to the header of <code>html</code> for easy crawling by search engines</li>
<li><code>id</code>: page <code>id</code>, will be added to the <code>html</code> tag, such as <code>&lt;html id="zh_readme"&gt;...&lt;/html&gt;</code>, it can be left unset, it will overwrite <code>config.json</code> Settings in</li>
<li><code>class</code>: page <code>class</code>, multiple separated by English comma<code>,</code>, it is not necessary to set it, it will overwrite the setting in <code>config.json</code>. For example, you can set the <code>css</code> style of a specific page by setting this value</li>
</ul>

<h3 id="markdown-file-content">Markdown file content</h3>

<p>The content is written using the <code>Markdown</code> grammar, because the title will be converted into the <code>&lt;h1&gt;</code> tag, so the content is recommended to start with the secondary title, so that a page has only one <code>&lt;h1&gt;</code> tag, which is convenient for search engines to crawl ,such as</p>

<pre><code class="markdown language-markdown">---
title: teedoc
keywords: teedoc, markdown, jupyter notebook, html, document generation, alternative gitbook, website generation, static website
desc: teedoc, convert markdown or jupyter notbook into html static webpage
id: zh_readme
class: zh_readme
---


## Title One

content. . .

## Title Two

content. . .
</code></pre>

<h2 id="links-pictures-and-other-resource-files">Links, pictures and other resource files</h2>

<p>The file placed under the document directory, if it is a recognizable file, such as <code>*.md</code>, it will be converted to <code>*.html</code>, if it cannot be recognized, such as <code>*.jpg</code>, it will be copied as it is</p>

<h3 id="the-easiest-and-recommended-way">The easiest and recommended way</h3>

<p>Resource files can be placed in the corresponding directory of the document, such as the document <code>docs/get_started/zh</code>, you can create <code>docs/get_started/zh/assets/images/logo.png</code>,<br />
Then use relative path references in <code>docs/get_started/zh/README.md</code>, namely <code>![](assets/images/logo.png)</code></p>

<h3 id="advanced-method">Advanced method</h3>

<p>This situation applies to multiple documents referencing resources under the same folder (<code>url</code>), which is convenient for maintaining multiple documents, such as multilingual translation, or reducing traffic consumption of <code>CDN</code></p>

<p>Use resources outside the document path, configure in <code>site_config.json</code></p>

<pre><code class="json language-json">{
    "route": {
        "docs": {
            "/get_started/zh/": "docs/get_started/zh",
        },
        "assets": {
            "/get_started/assets/": "docs/get_started/assets"
        }
    }
}
</code></pre>

<p>This setting will copy the entire directory of <code>docs/get_started/assets</code> to <code>/get_started/assets</code><br />
So only need to use relative path reference in <code>docs/get_started/zh/README.md</code>, namely <code>![](../assets/images/logo.png)</code></p>

                        </div>
                    </div>
                    <div id="previous_next">
                        <div id="previous">
                            <a href="/get_started/en/install/index.html"><span class="icon"></span><span class="label">Install teedoc</span></a>
                        </div>
                        <div id="next">
                            <a href="/get_started/en/usage/write_attention.html"><span class="label">Pay attention to when writing documents</span><span class="icon"></span></a>
                        </div>
                    </div>
                </div>
                <div id="toc">
                    <div>
                        <ul>
  <li><a href="#build-and-preview">Build and Preview</a></li>
  <li><a href="#build-document-delete">Build document delete</a></li>
  <li><a href="#document-directory-structure">Document directory structure</a></li>
  <li><a href="#configuration-file">Configuration file</a>
  <ul>
    <li><a href="#from-json-to-yaml">From json to yaml</a></li>
    <li><a href="#from-yaml-to-json">From yaml to json</a></li>
  </ul></li>
  <li><a href="#site_configjson-site-configuration">site_config.json Site configuration</a></li>
  <li><a href="#configjson-document-configuration">config.json document configuration</a></li>
  <li><a href="#sidebarjson-document-directory-sidebar-settings">sidebar.json Document directory (sidebar) settings</a></li>
  <li><a href="#markdown-documentation">Markdown documentation</a>
  <ul>
    <li><a href="#markdown-header">Markdown header</a></li>
    <li><a href="#markdown-file-content">Markdown file content</a></li>
  </ul></li>
  <li><a href="#links-pictures-and-other-resource-files">Links, pictures and other resource files</a>
  <ul>
    <li><a href="#the-easiest-and-recommended-way">The easiest and recommended way</a></li>
    <li><a href="#advanced-method">Advanced method</a></li>
  </ul></li>
</ul>

                    </div>
                </div>
            </div>
        </div>
        <a id="to_top" href="#"></a>
        <div id="doc_footer">
                        
            <div id="footer">
                <div id="footer_top">
                    <ul>
<li><a>Links</a><ul><li><a target="_blank" href="https://github.com/neutree/teedoc">Build with teedoc</a></li>
<li><a target="_blank" href="https://neucrack.com">Copyright © 2021 Neucrack</a></li>
<li><a  href="/sitemap.xml">Sitemap</a></li>
</ul>
</li>
<li><a>Source code</a><ul><li><a target="_blank" href="https://github.com/neutree/teedoc">github</a></li>
<li><a target="_blank" href="https://github.com/teedoc/teedoc.github.io">website source files</a></li>
</ul>
</li>
</ul>

                </div>
                <div id="footer_bottom">
                    <ul>
<li><a target="_blank" href="https://beian.miit.gov.cn">*ICP备********号-1</a></li>
<li><a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index">*公网安备**************号</a></li>
</ul>

                </div>
            </div>
                    </div>
</body>
<script src="/static/js/theme_default/main.js"></script>
<script src="/static/css/theme_default/prism.min.js"></script>
<script src="/static/js/custom.js"></script>
<script src="/static/js/search/main.js"></script>
</html>
